<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>领取优惠券</title>
    <script src="./assets/layer/layer.js"></script>

    <link rel="stylesheet" href="./assets/css/mdui.min.css">
    
    <script src="./assets/js/mdui.min.js"></script>
    <script src="./assets/js/common.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
    <style>
            #con2 img{
                width:2rem;
            }
            #bg{
                background:url(./assets/img/share_bg.png);
                background-size: 100% auto;
                width: 100%;
                height:15rem;
            }

            #bg .title{
                color:#fff;
                font-size:1.5rem;
                text-align: center;
                margin-top:1rem;

            }
            #con2{
                padding:1rem
            }
            #share{
                background:url(./assets/img/share.png) no-repeat center top;
                background-size: 80% auto;
                background-position:center center;
               margin-top:1rem;
                height:8rem;
                position:relative
            }
            #logo{
                height: 2rem;
            }
            #lingquan{
                position: absolute;
                top:40%;
                left:63%;
                color:#fff;
                font-size:1.3rem;
            }
            #times{
                position: absolute;
                top:35%;
                left:28%;
                color:#d0021b;
                font-size:2rem;
            }
            .price{
                color:#f40;
                font-size:2rem;
            }
            .imgs{
                width:100% !important;
                height:5rem;
            }
            .card{
                padding:0.5rem;
            }
            .card .title{
                font-size:1rem;
            }
            /* .card .prices{
                float
            } */
            .price_div{
                position: absolute;
                bottom:-360%;
                width:100%;
            }
            #send{
                width:100%;
                height:100%;
                background-color:rgba(0,0,0,0.8);
                position: fixed;
                display: none;
                top:0;
     
            }
            #send #text{
                color:#fff;
                margin-top:11rem;
                font-size:1.5rem;
                text-align: center;
            }
            #phone{
                margin-bottom:2rem;
            }
            #name{
                margin-bottom:2rem;
            }
            button{
                
            }
    </style>
<body>

    <div id="bg" >
        <div id="logo"></div>
        <div class="title">领取优惠券</div>
        <div onclick="get()" id="share">
            <span  id="lingquan">立刻领取</span>
            <span id="times">  </span>
        </div>
    </div>
    <div id="con2">
        <div v-for="item in ticket_list" class=" mdui-shadow-2 card">
            <div class="mdui-container">
                <div class="mdui-col-xs-3" style="padding:0">
                    <img :src="item.t_coupon_image" class="imgs" alt="">
                </div>
                <div class="prices mdui-col-xs-9">
                    <div class="title">{{item.t_coupon_name}}</div>
                    <div  class="price_div"> ￥<span class="price"> {{item.f_price}}</span>   <span style="float:right;font-size:25px;" class=""> {{item.f_qty}} 张</span> </div>
                </div>
            </div>
        </div> 
    </div>
</body>
</html>
<script>

        console.log($_GET().openid);
        
        if($_GET().openid == undefined){
                location = domain+'/API/WECHATAPI/userLogin?url='+location.href;
        }

        $.get(domain+ '/api/client/check_isget/cid/'+$_GET().id,{},function(data){
            if(data.code != 200){
               
                $("#share").attr('onclick'," alert('优惠券已被领取，你来晚了')");
            } 
        },'json')
        var ticket_list = new Vue({
            el:'#con2',
            data:{
                ticket_list:{},
                num:1
            }
        })
        $.post(domain+'/api/client/ticketInfo',{t_id:$_GET().id},function(data){
            ticket_list.ticket_list = data.data;       
            bg.data = data.ticket_data;
            $("#times").html(data.allnum+'张')  
        },'json')
        



        function bind()
        {
            var bindload = layer.open({
                type: 2
                ,content: '绑定中'
            });

            $.post(domain+'/api/client/inputinfo',{
                openid:$_GET().openid,
                phone:$("#phone").val(),
                name:$("#name").val(),
            },function(data){
                layer.close(bindload);
                if(data.code == 200){
                    get();
                }else{
                    alert(data.data);
                }
            },'json')
        }


        function check()
        {
            var  res = 0;
            $.ajax(domain+'/api/client/checkuser',{
                data:{openid:$_GET().openid},
                async:false,
                dataType:'json',
                type:'post',
                success:function(data){
                    if(data.code != 200){
                        layer.open({
                            title: [
                            '请绑定手机号和姓名',
                            'background-color: #FF4351; color:#fff;'
                            ]
                            ,content: ' <input class="mdui-textfield-input" placeholder="请输入您的手机" id="phone">'
                                    +'<input class="mdui-textfield-input" placeholder="请输入您的姓名" id="name"> <button onclick="bind()" class="mdui-btn mdui-btn-raised mdui-color-theme-red mdui-btn-dense mdui-ripple">立刻绑定</button> '
                        });
                    
                    }else{
                        res =  1;
                    }
                }  
            })
            return res;

        }


        function get()
        {   
            if(!check()){
                return false;
            }
            
            $.post(domain+'/api/Client/recive',{
                t_id:$_GET().id,
                openid: $_GET().openid
            },function(data){
                console.log(data);
                layer.closeAll();
                if(data.code == 200){
                      //询问框
                    layer.open({
                        content: '恭喜，领取成功，使用时请打开 我-卡包  使用优惠券！'
                        ,btn: [ '好的']
                        ,yes: function(index){
                            wx.ready(function(){
                                $.post(domain+'/api/wechatapi/getConfig',{openid:$_GET().openid},function(data){
                                    console.log(data);
                                    layer.closeAll();
                                        wx.addCard({
                                            cardList: data, // 直接由sdk处理好
                                            success: function (res) {
                                                var cardList = res.cardList; // 添加的卡券列表信息
                                                console.log(cardList);
                                            }
                                        },'json');
                                })
                            })
                        }
                    });
                }else{
                    layer.open({
                        content: data.data
                        ,skin: 'msg'
                        ,time: 2 //2秒后自动关闭
                    });
                }           
            },'json')
        }
        $.post(domain+"/getWxconfig.php",{'url':window.location.href},function(data){
            console.log(data);
            wx.config({
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: data.appId,
                timestamp: data.timestamp, // 必填，生成签名的时间戳
                nonceStr: data.nonceStr, // 必填，生成签名的随机串
                signature: data.signature,// 必填，签名
                jsApiList: ['addCard','updateAppMessageShareData','onMenuShareAppMessage'] // 必填，需要使用的JS接口列表
            });
        },'json')



           



</script>
